<template>
    <aside class="blogger" :class="isBlogger ? 'is-blogger' : ''">
        <transition name="slide-fade">
            <div v-show="isBlogger">
                <div class="personal">
                    <div class=personal-img></div>
                    <h3>X XX XXX</h3>
                </div>
                <nav class="blogger-nav">
                    <div class="blogger-nav-item">
                        <div>20</div>
                        <div>日志</div>
                    </div>
                    <div class="blogger-nav-item">
                        <div>20</div>
                        <div>日志</div>
                    </div>
                    <div class="blogger-nav-item">
                        <div>20</div>
                        <div>日志</div>
                    </div>
                </nav>
                <div class="mogul">
                    <div class="mogul-title">大佬们QWQ</div>
                    <ul class="mogul-list clear-float">
                        <li>dslfd</li>
                        <li>大哥大哥</li>
                        <li>发f</li>
                        <li>acdfsfdsgdgdgadsgdsfg</li>
                        <li>发顺丰dfdf到付d</li>
                        <li>发顺dfdfdf丰到付d</li>
                        <li>发顺丰到dfdf付d</li>
                    </ul>
                </div>
            </div>
        </transition>
    </aside>
</template>

<script>
export default {
    props: {
        isBlogger: {
            type: Boolean,
            default: false,
        }
    },
}
</script>

<style scoped>
    .blogger {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        /* width: 320px; */
        width: 0;
        background-color: #222;
        text-align: center;
        color: #999;
        transition: width .3s ease-in-out;
        overflow: hidden;
    }
    .is-blogger {
        width: 320px;
    }

    .slide-fade-enter-active {
        transition: all .8s ease-in-out;
        /* transition-delay: .06s; */
    }
    .slide-fade-enter,
    .slide-fade-leave-to {
        transform: translateX(-6%);
        opacity: 0;
    }

    .personal {
        margin: 30px 0 20px;
        display: inline-block;
    }

    .personal-img {
        padding: 3px;
        width: 100px;
        height: 100px;
        border: 1px solid #555;
        border-radius: 50%;
        overflow: hidden;
    }

    .personal-img > img {
        width: 100%;
        height: auto;
    }

    .personal > h3 {
        margin-top: 10px;
        color: rgb(240, 240, 240);
        font-weight: 400;
    }

    .blogger-nav {
        margin-bottom: 15px;
    }

    .blogger-nav-item {
        display: inline-block;
        padding: 0 15px;
        border-right: 1px solid #333;
    }

    .blogger-nav-item:last-child {
        border-right: none;
    }

    .blogger-nav-item > div:first-child {
        font-size: 20px;
        font-weight: 700;
    }

    .mogul {
        margin-top: 30px;
        padding: 0 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .mogul-title {
        font-weight: 700;
    }

    .mogul-list > li {
        display: inline-block;
        /* float: left; */
        padding-bottom: 2px;
        margin: 15px 10px 0;
        font-size: 12px;
        border-bottom: 1px solid #555;
        cursor: pointer;
    }

    .mogul-list > li:hover {
        color: #fff;
        border-bottom-color: #fff;
    }
</style>
